<template>
  <el-row :gutter="20">
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
    <el-col :xs="24" :sm="20">
      <el-card style="background-color: rgba(255,255,255,0.9)" class="about-card">
        <div class="about-container">
          <div class="about-header">
            <el-avatar :size="120" :src="userInfo.avatar" class="avatar">
              <i class="el-icon-user-solid" style="font-size: 60px;"></i>
            </el-avatar>
            <h1 class="name">{{ userInfo.name }}</h1>
            <p class="bio">{{ userInfo.bio }}</p>
            <div class="social-links">
              <a v-for="link in userInfo.socialLinks" :key="link.name" :href="link.url" target="_blank" class="social-link">
                <i :class="link.icon"></i>
              </a>
            </div>
          </div>
          
          <el-divider></el-divider>
          
          <div class="about-content">
            <el-tabs v-model="activeTab" type="border-card">
              <el-tab-pane label="关于我" name="about">
                <div class="tab-content">
                  <h3>个人简介</h3>
                  <p v-for="(paragraph, index) in userInfo.description" :key="index">{{ paragraph }}</p>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="技能树" name="skills">
                <div class="tab-content">
                  <div v-for="skill in userInfo.skills" :key="skill.category" class="skill-category">
                    <h4>{{ skill.category }}</h4>
                    <div class="skill-items">
                      <el-tag
                        v-for="item in skill.items"
                        :key="item.name"
                        :type="item.level === 'advanced' ? 'success' : item.level === 'intermediate' ? 'warning' : 'info'"
                        effect="plain"
                        class="skill-tag"
                      >
                        {{ item.name }}
                      </el-tag>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="工作经历" name="experience">
                <div class="tab-content">
                  <el-timeline>
                    <el-timeline-item
                      v-for="exp in userInfo.experience"
                      :key="exp.id"
                      :timestamp="exp.period"
                      placement="top"
                    >
                      <el-card>
                        <h4>{{ exp.position }}</h4>
                        <p class="company">{{ exp.company }}</p>
                        <p class="description">{{ exp.description }}</p>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </el-tab-pane>
              
              <el-tab-pane label="联系方式" name="contact">
                <div class="tab-content">
                  <el-descriptions :column="1" border>
                    <el-descriptions-item label="邮箱">
                      <a :href="`mailto:${userInfo.contact.email}`">{{ userInfo.contact.email }}</a>
                    </el-descriptions-item>
                    <el-descriptions-item label="GitHub">
                      <a :href="userInfo.contact.github" target="_blank">{{ userInfo.contact.github }}</a>
                    </el-descriptions-item>
                    <el-descriptions-item label="博客">
                      <a :href="userInfo.contact.blog" target="_blank">{{ userInfo.contact.blog }}</a>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址">
                      {{ userInfo.contact.address }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
  </el-row>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      activeTab: 'about',
      userInfo: {
        name: '博客作者',
        bio: '一名热爱编程的全栈开发者',
        avatar: 'https://via.placeholder.com/120',
        description: [
          '我是一名全栈开发者，专注于前端和后端技术的学习和实践。',
          '热爱开源，喜欢分享技术经验和学习心得。',
          '在这个博客中，我会记录我的学习历程、技术总结和项目经验。',
          '希望这些内容能够帮助到有需要的开发者，也欢迎大家一起交流学习。'
        ],
        skills: [
          {
            category: '前端技术',
            items: [
              { name: 'Vue.js', level: 'advanced' },
              { name: 'React', level: 'intermediate' },
              { name: 'JavaScript', level: 'advanced' },
              { name: 'TypeScript', level: 'intermediate' },
              { name: 'CSS/SCSS', level: 'advanced' }
            ]
          },
          {
            category: '后端技术',
            items: [
              { name: 'Java', level: 'advanced' },
              { name: 'Spring Boot', level: 'advanced' },
              { name: 'MySQL', level: 'intermediate' },
              { name: 'Redis', level: 'intermediate' },
              { name: 'Node.js', level: 'intermediate' }
            ]
          },
          {
            category: '工具和框架',
            items: [
              { name: 'Git', level: 'advanced' },
              { name: 'Docker', level: 'intermediate' },
              { name: 'Webpack', level: 'intermediate' },
              { name: 'Linux', level: 'intermediate' }
            ]
          }
        ],
        experience: [
          {
            id: 1,
            period: '2022-至今',
            position: '全栈开发工程师',
            company: '某某科技公司',
            description: '负责公司核心产品的前后端开发，参与架构设计和技术选型。'
          },
          {
            id: 2,
            period: '2020-2022',
            position: '前端开发工程师',
            company: '某某互联网公司',
            description: '负责移动端和Web端的前端开发，优化用户体验和性能。'
          },
          {
            id: 3,
            period: '2018-2020',
            position: 'Java开发工程师',
            company: '某某软件公司',
            description: '参与企业级应用开发，负责后端API设计和数据库优化。'
          }
        ],
        contact: {
          email: 'example@email.com',
          github: 'https://github.com/username',
          blog: 'https://blog.example.com',
          address: '中国 · 北京'
        },
        socialLinks: [
          { name: 'GitHub', icon: 'el-icon-link', url: 'https://github.com' },
          { name: '微博', icon: 'el-icon-star-on', url: 'https://weibo.com' },
          { name: '知乎', icon: 'el-icon-chat-line-square', url: 'https://zhihu.com' }
        ]
      }
    }
  }
}
</script>

<style scoped>
.about-card {
  margin-top: 20px;
}

.about-container {
  padding: 20px;
}

.about-header {
  text-align: center;
  padding: 30px 0;
}

.avatar {
  margin-bottom: 20px;
  border: 4px solid #409eff;
}

.name {
  margin: 15px 0;
  color: #303133;
  font-size: 32px;
}

.bio {
  color: #909399;
  font-size: 16px;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #409eff;
  color: #fff;
  font-size: 20px;
  transition: all 0.3s;
}

.social-link:hover {
  background-color: #66b1ff;
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.about-content {
  margin-top: 30px;
}

.tab-content {
  padding: 20px;
  min-height: 300px;
}

.tab-content h3 {
  margin-bottom: 15px;
  color: #303133;
}

.tab-content p {
  line-height: 1.8;
  color: #606266;
  margin-bottom: 15px;
}

.skill-category {
  margin-bottom: 25px;
}

.skill-category h4 {
  margin-bottom: 15px;
  color: #303133;
  font-size: 18px;
}

.skill-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tag {
  font-size: 14px;
  padding: 8px 16px;
}

.company {
  color: #409eff;
  font-weight: bold;
  margin: 5px 0;
}

.description {
  color: #606266;
  line-height: 1.6;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .about-container {
    padding: 10px;
  }
  
  .name {
    font-size: 24px;
  }
  
  .tab-content {
    padding: 10px;
  }
}
</style>

